<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../component/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}">
</head>
<style type="text/css">
    a {
        text-decoration: none !important;
        cursor: pointer !important;
        color: #555666 !important;
    }

    /* 已访问的链接 */
    a:hover {
        color: #fc5531 !important;
    }

    .art h1 {
        font-size: 32px;
        font-weight: 500;
        line-height: 46px;
        margin: 5px auto 15px auto;
        text-align: center;
    }

    .art .meta {
        font-size: 12px;
        color: #999;
        text-align: center;
    }

    .content p {
        margin-top: 23px;
        text-align: justify;
        font-size: 20px;
        line-height: 38px;
        text-indent: 0em;
    }

    .com {
        margin-top: 20px;
    }

    .com h2 {
        font-size: 18px;
        color: #000;
        font-weight: bold;
        margin-bottom: 10px;
    }

    /*评论展示区*/
    .comment-list {
        margin-top: 10px;
    }

    .comment-line-box {
        padding: 8px 0px;
    }

    .replay-box .comment-list {
        margin-left: 32px;
        padding-left: 10px;
        border-left: 2px solid #f5f6f7;
        border-bottom: none;
    }

    .comment-line-box .nickname {
        color: #009688;
    }

    .comment-line-box .opt {
        margin-left: 10px;
    }

    .comment-line-box .opt a {
        font-size: 12px;
        margin-left: 5px;
    }

    textarea {
        min-width: 500px;
        max-width: 800px;
        min-height: 100px;
        max-height: 100px;
    }

</style>
<body>

<!--评论表单-->
 

<!--评论展示区-->
<div class="layui-row">
    <div class="layui-col-md6 layui-col-md-offset3 com-box">
        <div class="comment-list-box">
            <ul class="comment-list" id="comment">

            </ul>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../../component/layui/layui.js" ></script>
<script src="../../api/baseApi.js"></script>
<script src="../../api/commentApi.js"></script>
<script src="../../component/js/core.util.js"></script>


<script>
    layui.use(['layer', 'form'], function () {
        var form = layui.form;
        var layer = layui.layer;
        $ = layui.jquery;

		var orderId =  getUrlParam("orderId")
		console.info("当前订单Id:", orderId)
		select(orderId)

        // 加载评论列表
        // 提交评论
        form.on('submit(comform)', function (data) {
			var data={
				"username":$("#username").val(),
				"content": $('#content').val(),
				"replyTo": $('#replyTo').val(),
				"parentId": $('#parentId').val()
			};
			data.orderId = getUrlParam("orderId")
			data.username = coreUtil.getLocalDataUserId()
			console.info(coreUtil.getLocalDataUserId())
			console.info("添加评论：",JSON.stringify(data))
            saveComment(data);
            return false;
        });


    });

	/**
	 * 获取url中参数的值
	 * @param {type} name url中get的值
	 * @returns {GetQueryString.r}
	 */
	function getUrlParam(name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) 
            return decodeURI(r[2]);
    };
	
    function select(orderId) {
		const parm = {
			"orderId": orderId
		}
		console.info("评论查询入参：",JSON.stringify(parm))
		coreUtil.sendAjax(commentSelectUrl, JSON.stringify(parm), function (res) {
			layer.msg("查询成功", {icon: 1,time: 1000}, function () {
				const data = res.data
				data.forEach( (item)=>{
					console.info("当前订单的评价：",JSON.stringify(item))
					userName = item.username
					userNames = item.usernames
					comment = item.content
					id = item.id
					console.info(id)
					const commentHtml = '<li class="comment-line-box d-flex">' + 
					'  <a href="#"> <span class="nickname">'+userNames+'</span></a> <span class="colon">:</span>' + 
					'   <span class="comment"> '+comment+' </span> ' + 
					'  <span class="opt">   <a onclick></a> </span>  </li>' + 
					'<li class="replay-box" style="display:block">'

					subComment = item.commentList
					if(undefined === subComment){
						console.info("无子评论")
						
					}else {
						var subCommentHtml = ''
						subComment.forEach((subComentItem) =>{
							console.info("子评论：", subComentItem)
							subUserName = subComentItem.username
							subUserNames = subComentItem.usernames
							subComment = subComentItem.content
							subId = subComentItem.id
							replyTo = subComentItem.replyTo
							replyTos = subComentItem.replyTos	
							
							subCommentHtml += ('<ul class="comment-list">  <li class="comment-line-box"><a href="#"> <span class="nickname"> '+subUserNames +'</span> '  + 
							'</a> <span class="text">回复</span>  <a href="#">  <span class="nickname" >'+replyTos+'</span>  </a>' + 
							'<span class="colon">:</span><span class="comment">：）'+ subComment +'</span> ' + 
							'<span class="opt"> <a></a>' + 
							'</span> </li> </ul>')	 
						})
						console.info('最终子评论：', subCommentHtml)
					}
					
					if(undefined === subCommentHtml ){
						$('#comment').append(commentHtml +'</li>')
					}else{
						$('#comment').append(commentHtml + subCommentHtml +'</li>')
					}
				})
			});
		}, "POST", false)
    }
	
	

    function reply(pid,to) {
        $('#replyTo').val(to);
        $('#parentId').val(pid);
		console.info("评论回复 pid 参数：",pid)
		console.info("评论回复 replyTo 参数：",to)
        // 弹出回复框：
        layer.open({
            type: 1,
            title: "回复评论",
            skin: "myclass",//自定样式
            area: ["700px", "400px"],
            content: $("#combox"),

            success: function (layero, index) {
            },
            yes: function () {
            }
        });

    }

    function saveComment(data) {
        $.ajax({
            url: commentSaveUrl,
            type: 'POST',
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(data),
            success: function (result) {
                if (result.code == 200) {
                    // 刷新页面
                    $('#replyTo').val('');
                    $('#parentId').val('');
                   window.location.reload()
                } else {
                    layer.alert(result.message);
                }
            }
        });
    }

</script>
</body>
</html>